<script setup>
import Header from '@/components/header/Header.vue'
import InputBox from "@/views/search-result/components/InputBox.vue"
import Result from './components/Result.vue'
import api from '@/api/index.js'

import { ref } from "vue"
import { onBeforeRouteLeave, useRoute } from "vue-router"
import { determineNeedSaveKeepALive } from "@/utils/routerKeepALive.js";
import {useKeepalive} from "@/hooks/useKeepalive.js";

defineOptions({
  name: 'SearchResult',
})

// onBeforeRouteLeave((to, from) => {
//   const needSaveRoute = ['scenicDetail', 'hotelDetail']
//   determineNeedSaveKeepALive(to, from, needSaveRoute, 'SearchResult')
// })

// const needSaveRoute = ['scenicDetail', 'hotelDetail']
// const { scrollYEle } = useKeepalive(needSaveRoute, 'SearchResult')

const route = useRoute()

console.log('route', route)
const searchKey = ref(route.params.searchKey)
console.log('searchKey', searchKey.value)
const search = (e) => {
  searchKey.value = e
}

</script>

<template>
  <div class="result_page">
    <Header title="搜索" :back="true" class="header"/>
    <InputBox class="input_box" @search="search" />
    <Result :propSearchKey="searchKey" />
  </div>
</template>

<style scoped lang="scss">
.result_page{
  display: flex;
  flex-direction: column;
  height: 100%;
  //overflow-y: auto;
  .header{
    flex-shrink: 0;
  }
  .result{
    flex: 1;
  }
}
</style>